<template>
	<view class="cotainer">
		<view class="logo">
			<image src="../../static/logo.png"></image>
			<view class="text">校园社团</view>
		</view>
		<view class="login">
			<uni-forms
				ref="form"
				:modelValue="formData"
				validate-trigger="bind"
				:rules="accountRules"
			>
				<uni-forms-item name="name">
					<uni-easyinput
						prefixIcon="contact"
						type="text"
						v-model="formData.name"
						placeholder="请输入用户名"
					/>
				</uni-forms-item>
				<uni-forms-item name="password">
					<uni-easyinput
						prefix-icon="locked"
						class="login-input"
						type="password"
						v-model="formData.password"
						placeholder="请输入密码"
					/>
				</uni-forms-item>
			</uni-forms>
			<button class="btn" @click="submitForm">登陆</button>
		</view>

		<view class="switch">
			<text @click="goRegister">立即注册</text>
			<text @click="goFindPassword">忘记密码</text>
		</view>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue'
import useLoginStore from '@/store/login.js'
const loginStore = useLoginStore()

const formData = ref({
	name: '',
	password: ''
})

const accountRules = {
	name: {
		rules: [
			{
				required: true,
				errorMessage: '必须输入帐号信息~'
			},
			{
				pattern: /^[a-z0-9]{6,20}$/,
				errorMessage: '必须是6~20数字或字母组成~'
			}
		]
	},
	// 对email字段进行必填验证
	password: {
		rules: [
			{
				required: true,
				errorMessage: '必须输入密码信息~'
			},
			{
				pattern: /^[a-z0-9]{8,}$/,
				errorMessage: '必须是8位以上数字或字母组成'
			}
		]
	}
}
const form = ref('')

const submitForm = () => {
	form.value
		.validate()
		.then(async (res) => {
			try {
				const result = await loginStore.loginAccountAction(formData.value)
				uni.switchTab({
					url: '/pages/index/index'
				})
			} catch (err) {
				uni.showToast({
					title: '用户不存在',
					icon: 'error'
				})
			}
		})
		.catch((err) => {
			uni.showToast({
				title: '请正确输入',
				icon: 'error'
			})
		})
}

const goRegister = () => {
	uni.redirectTo({
		url: '/pages/register/register'
	})
}

const goFindPassword =() => {
	uni.navigateTo({
		url:'/pages/forget-password/forget-password'
	})
}
</script>

<style lang="less" scoped>
page {
	background-color: #ffffff;
}
.cotainer {
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	width: 750rpx;
	padding: 60rpx;
	background: #ffffff;
	.logo {
		margin-top: 178rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		> image {
			width: 62rpx;
			height: 62rpx;
		}
		.text {
			margin-top: 70rpx;
			width: 242rpx;
			height: 40rpx;
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 46rpx;
			color: #333333;
			letter-spacing: 2.3rpx;
			text-align: center;
			line-height: 40rpx;
		}
	}
	.login {
		margin-top: 80rpx;
		.btn {
			margin-top: 100rpx;
			width: 630rpx;
			height: 80rpx;
			background: #4b96e9;
			border-radius: 40rpx;
			font-size: 32rpx;
			color: #ffffff;
		}
	}
	::v-deep {
		.uni-easyinput__content {
			border: none;
			border-bottom: 1rpx solid #e6e6e6;
		}
	}
	.switch {
		margin-top: 40rpx;
		display: flex;
		justify-content: space-between;
		width: 370rpx;
		height: 26rpx;
		text:first-child {
			color: #4b96e9;
		}
		text {
			text-align: center;
			cursor: pointer;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 26rpx;
			letter-spacing: 0;
			line-height: 26rpx;
		}
	}
}
</style>
